<div class="lv-time-picker-panel-container">
  <div class="lv-time-picker-panel-header" *ngIf="lvHeader !== null">
    <ng-container [ngTemplateOutlet]="lvHeader"></ng-container>
  </div>
  <div class="lv-time-picker-panel-body">
    <div class="lv-time-picker-panel-combobox">
      <!-- 时 -->
      <ul
        #hourContainer
        class="lv-time-picker-panel-selection lv-time-picker-panel-hour"
        [ngClass]="selectionClass"
        *ngIf="showHours"
      >
        <li
          *ngFor="let item of hourOptions; trackBy: trackByIndex"
          (click)="setTimer('hour', item)"
          [attr.disabled]="item.isDisabled ? 'disabled' : null"
          [ngClass]="{ selected: item.isSelected }"
        >
          {{ formatHour(item.value) }}
        </li>
      </ul>

      <!-- 分 -->
      <ul
        #minuteContainer
        class="lv-time-picker-panel-selection lv-time-picker-panel-minute"
        [ngClass]="selectionClass"
        *ngIf="showMinutes"
      >
        <li
          *ngFor="let item of minuteOptions; trackBy: trackByIndex"
          (click)="setTimer('minute', item)"
          [attr.disabled]="item.isDisabled ? 'disabled' : null"
          [ngClass]="{ selected: item.isSelected }"
        >
          {{ item.value }}
        </li>
      </ul>

      <!-- 秒 -->
      <ul
        #secondContainer
        class="lv-time-picker-panel-selection lv-time-picker-panel-second"
        [ngClass]="selectionClass"
        *ngIf="showSeconds"
      >
        <li
          *ngFor="let item of secondOptions; trackBy: trackByIndex"
          (click)="setTimer('second', item)"
          [attr.disabled]="item.isDisabled ? 'disabled' : null"
          [ngClass]="{ selected: item.isSelected }"
        >
          {{ item.value }}
        </li>
      </ul>

      <!-- am/pm -->
      <ul
        class="lv-time-picker-panel-selection lv-time-picker-panel-hour-system"
        [ngClass]="selectionClass"
        *ngIf="is12Hour"
      >
        <li *ngFor="let item of hourSystemOptions">{{ item }}</li>
      </ul>
    </div>
  </div>
  <div class="lv-time-picker-panel-footer" *ngIf="lvFooter !== null">
    <ng-container [ngTemplateOutlet]="lvFooter"></ng-container>
  </div>
  <div class="lv-time-picker-panel-operation" *ngIf="lvOpenObserver">
    <button lv-button lvType="link" lvSize="auto" (click)="selectJustNow()">
      {{ i18n.get('justNow') }}
    </button>
    <button lv-button lvType="primary" lvSize="auto" (click)="close()">
      {{ i18n.get('ok') }}
    </button>
  </div>
</div>
